<template>
	<view>
		<navbar :backshow="true" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>
		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }"></view>
		<!-- 信息预览展示 -->
		<view class="bookxqbox">
			<view class="bookitemssd">
				<view class="bookitemlabnames bookitemlabnamesd">预约设备：</view>
				<view class="devbok">
					<view class="devit" v-for="item in  parseJSONs(formData.deviceDetail)">
						<view class="devnam">
							{{ item.deviceName }}
						</view>
						<view class="devnamb">
							{{ item.number }}
						</view>
					</view>
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabnames">开始时间：</view>
				<view class="bookitemlab">
					{{ formData.startTime }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabnames">结束时间：</view>
				<view class="bookitemlab">
					{{ formData.endTime }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabname">备注：</view>
				<view class="bookitemlab">
					{{ formData.remark }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabnamess"
					:class="formData.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ formData.auditStatus == '1' ? '审批通过:':'审批不通过:'}}
				</view>
				<view class="bookitemlab"
					:class="formData.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ formData.auditTime}}
				</view>
			</view>
			<view class="bookitem" v-if="formData.auditStatus==2">
				<view class="bookitemlabnamess"
					:class="formData.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					理由：
				</view>
				<view class="bookitemlab bookitemlabnamessreds"
					:class="formData.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ formData.auditRemark}}
				</view>
			</view>
		</view>

		<view class="tjylzw"></view>
		<view class="tjcgboxs">
			<image src="../../static/jxz.png" mode="" class="tjcgboximg"
				v-if="getStatus(formData.startTime,formData.endTime,formData.auditStatus)=='正在进行'">
				<image src="../../static/tjer.png" mode="" class="tjcgboximg"
					v-if="getStatus(formData.startTime,formData.endTime,formData.auditStatus)!='正在进行'">
				</image>
				<view class="tjcjms">{{ getStatus(formData.startTime,formData.endTime,formData.auditStatus) }}</view>
				<view class="tjcjmst">{{ getStatuss(formData.endTime,formData.auditStatus) }}</view>
		</view>
		<view class="zwdboxs"></view>
		<view class="tjyl" @click="sava" v-if="formData.evaluateStatus==1">验收结果</view>
		<!-- <view class="tjyls" @click="back">我要修改一下</view> -->
		<view class="tjylzw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "预约详情",
				navBarHeight: 50, // 导航栏高度
				menuRight: 10, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 50, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 60,
				activeTab: 0,
				formData: {},
				id: ''
			};
		},
		onLoad() {
			const that = this;

			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
			// 获取一下 最新数据

			uni.getStorage({
				key: "deviceDataxq",
				success: (res) => {
					console.log("获取的数据：", res.data);
					// 可以在这里处理获取到的数据
					this.id = res.data.appointmentId;
					this.$myRequest({
						url: '/client/appointment/getDeviceAppointmentInfo',
						method: "GET",
						data: {
							appointmentId: this.id
						}
					}).then((res) => {
						if (res.code == 200) {
							this.formData = res.data
							console.log("查询设备详情：", res.data);
						}
					})

				},
				fail: function() {
					console.error("获取数据失败");
				},
			});

		},
		methods: {
			sava() {
				uni.navigateTo({
					url: "/pages/devbookys/devbookys", // 要跳转的非 tabBar 页面路径，可以带参数
				});
			},
			getStatus(startTime, endTime, auditStatus) {
				if (!startTime || !endTime) {
					return "未提供开始时间或结束时间";
				}

				// 获取当前时间
				const now = new Date();

				// 替换空格为T，并转换为ISO 8601格式
				const formattedStartTime = startTime.replace(' ', 'T');
				const formattedEndTime = endTime.replace(' ', 'T');

				// 创建开始时间和结束时间的 Date 对象
				const startDateTime = new Date(formattedStartTime);
				const endDateTime = new Date(formattedEndTime);

				// 根据当前时间和审核状态返回相应状态
				if (now < startDateTime) {
					return "还未开始";
				} else if (now >= startDateTime && now < endDateTime) {
					if (auditStatus == 1) {
						return "正在进行";
					} else if (auditStatus == 2) {
						return "未通过审核";
					} else {
						return "审核中";
					}
				} else {
					return "已经结束";
				}
			},
			parseJSONs(str) {
				try {
					return JSON.parse(str);
				} catch (error) {
					// JSON.parse 出错时捕获异常
					// console.error('解析 JSON 出错:', error);
					return str;
				}
			},
			getStatuss(endTime) {
				if (!endTime) {
					return "未提供结束时间";
				}

				// 获取当前时间
				const now = new Date();

				// 替换空格为T，并转换为ISO 8601格式
				const formattedEndTime = endTime.replace(' ', 'T');

				// 创建结束时间的 Date 对象
				const endDateTime = new Date(formattedEndTime);

				// 比较当前时间与结束时间，返回不同的状态消息
				if (now < endDateTime) {
					return "预约的内容将于" + endTime + "结束";
				} else {
					return "预约的内容已于" + endTime + "结束";
				}
			}
			// formatTimeRange(startTime, endTime) {
			// 	if (startTime === "" || endTime === "") {
			// 		return "数据错误";
			// 	}

			// 	// 将字符串转换为 Date 对象
			// 	const startDate = new Date(startTime.replace(/-/g, '/')); // 替换所有的'-'号
			// 	const endDate = new Date(endTime.replace(/-/g, '/'));

			// 	// 格式化日期部分
			// 	const startDateString = this.formatDate(startDate); // 格式化开始日期部分

			// 	// 格式化时间部分
			// 	const startTimeString = this.formatTime(startDate); // 格式化开始时间部分
			// 	const endTimeString = this.formatTime(endDate); // 格式化结束时间部分

			// 	// 格式化成所需的字符串
			// 	const formattedTimeRange = `${startDateString} ${startTimeString}~${endTimeString}`;

			// 	return formattedTimeRange;
			// },

			// // 辅助函数，格式化日期部分
			// formatDate(date) {
			// 	const year = date.getFullYear();
			// 	const month = this.padZero(date.getMonth() + 1); // 月份从0开始，需要加1
			// 	const day = this.padZero(date.getDate());

			// 	// 返回格式化后的日期部分字符串
			// 	return `${year}-${month}-${day}`;
			// },

			// // 辅助函数，格式化时间部分
			// formatTime(date) {
			// 	const hours = this.padZero(date.getHours());
			// 	const minutes = this.padZero(date.getMinutes());

			// 	// 返回格式化后的时间部分字符串
			// 	return `${hours}:${minutes}`;
			// },

			// // 辅助函数，补零函数，用于确保日期时间部分是两位数
			// padZero(num) {
			// 	return num.toString().padStart(2, '0');
			// },
		},
	};
</script>

<style></style>